<template>
    <div id="app">
        <todo-add  @addTodos="AppAdd"/>
        <running :todos="todos" @delItem="todos.splice($event,1)"/>
        <complate :todos="todos" @delItem="todos.splice($event,1)"/>
        <footer-cmp  @clear="todos.length=0"/>
    </div>
</template> 
<script setup>
    import TodoAdd from "./components/todo-add.vue";
    import Running from "./components/running.vue";
    import Complate from "./components/complate.vue";
    import FooterCmp from "./components/footer.vue";
    import {ref , onMounted , watch} from 'vue'
    // 从本地获取数据
    let todos = ref(JSON.parse(localStorage.getItem('todos'))||[])
    // 接收数据
    const AppAdd = ($event)=>{
        todos.value.push({
            id:new Date().getTime(),
            checked:false,
            content:$event,
            edit:false 
        })
    }
    // 监听todos缓存到本地
    watch(todos,(todos)=>{
        //  使用 JSON.stringify的时候 不需要加value属性
        localStorage.setItem('todos',JSON.stringify(todos))
    },{
        immediate:true,
        deep:true
    })
</script>
<script>
export default {
    name: "App",
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #cdcdcd;
}

section {
    margin: 0 auto;
}

input:focus {
    outline-width: 0;
}

h2 {
    position: relative;
}

span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #e6e6fa;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}

li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629a9c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
    cursor: move;
}

ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}

li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #fff;
    background: #ccc;
    line-height: 14px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}

@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}</style>